<script setup lang='ts' name="protocol-management-list">
import ExpandBtn from '@/components/expand-btn.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElPagination } from 'element-plus'
import { useRouter } from 'vue-router'

import { ORDERSTATUTOPTIONS } from '../constant'
import { filterLabel } from '../helper'
import ExpandRow from './expand.vue'
import RejectReview from './reject-review.vue'

const props = withDefaults(defineProps<{
    data?: any
    loading: boolean
    total?: any
}>(), {
    data: () => [],
    loading: false,
    total: 0,
})

const emits = defineEmits(['doAction', 'pageChange'])

const { push } = useRouter()

const { data, total } = toRefs(props)

const visible = ref<boolean>(false)

const id = ref('')

const state = {
    page: 1,
    size: 10,
}

const pages = ref({ ...state })

function doAction(item: any, row: any) {
    emits('doAction', item, row)
}

function handleSizeChange(val: any) {
    console.log('size', val)
    pageChange()
}
function handleCurrentChange(val: any) {
    console.log('page', val)
    pageChange()
}

function pageChange() {
    emits('pageChange', { ...pages.value })
}

function checkChange(e: any, item: any) {
    console.log('1', e)
    console.log('2', item)
}

// 拒单审核
function rejectionReview(item: any) {
    id.value = item.id
    visible.value = true
}
function showRejectionReview(val: number) {
    return val === 11
}

function showDetail(id: string) {
    push(`/operations-pages/operations-order-management/order-list/${id}`)
}
</script>

<template>
    <ElSkeleton v-if="loading"
                :rows="5"
    />

    <template v-else>
        <template v-if="data.length">
            <div v-for="item in data"
                 :key="item.id"
                 class="protocol-list"
            >
                <p class="top">
                    <span class="top-label truncate"
                          :title="item.createTime"
                    >下单时间：{{ item.createTime }}</span>
                    &nbsp;&nbsp;

                    <span class="top-label truncate"
                          :title="item.orderNo"
                    >订单编号：{{ item.orderNo }}</span>
                    &nbsp;&nbsp;
                </p>

                <div class="list-content">
                    <div class="check-col">
                        <el-checkbox v-model="item.checked"
                                     @change="checkChange($event, item)"
                        />
                    </div>

                    <div class="list-row">
                        <div class="list-col">
                            <div class="flex w-full">
                                <p class="col-title truncate max-w-130"
                                   :title="item.orderName"
                                >
                                    {{ item.orderName }}
                                </p>

                                <span class="col-tips ml-10 cursor-pointer"
                                      @click="showDetail(item.id)"
                                >
                                    <el-icon>
                                        <ArrowRight />
                                    </el-icon>
                                </span>
                            </div>

                            <p class="truncate"
                               :title="item.projectName"
                            >
                                项目：<span>{{ item.projectName }}</span>
                            </p>

                            <p class="truncate"
                               :title="item.partyA"
                            >
                                甲方：<span>{{ item.partyA }}</span>
                            </p>

                            <p class="truncate"
                               :title="item.partyB"
                            >
                                乙方：<span>{{ item.partyB }}</span>
                            </p>
                        </div>

                        <div class="list-col">
                            <p>{{ filterLabel(ORDERSTATUTOPTIONS, item.orderStatus) }}</p>
                        </div>

                        <div class="list-col">
                            <p>来源：<span>{{ item.orderSource }}</span></p>
                        </div>

                        <div class="list-col col-price">
                            <p>总价：<span>￥{{ item.totalPrice }}元</span></p>

                            <p>共{{ item.totalQuantity }}个商品</p>
                        </div>

                        <div class="list-col flex justify-center">
                            <ElButton v-if="showRejectionReview(item.orderStatus)"
                                      type="primary"
                                      size="small"
                                      @click="rejectionReview(item)"
                            >
                                拒单审核
                            </ElButton>
                        </div>
                    </div>
                </div>

                <div v-if="item?.deliveryNoteVOS && item?.deliveryNoteVOS.length"
                     class="expand-row"
                >
                    <p style="padding-left:5px;line-height: 32px;">
                        <ExpandBtn v-model="item.expand" />
                    </p>

                    <ExpandRow v-if="!item.expand"
                               :data="item?.deliveryNoteVOS"
                               @do-action="doAction($event, item)"
                    />
                </div>
            </div>
        </template>

        <div v-else
             style="text-align: center;"
        >
            暂无数据
        </div>
    </template>

    <ElPagination v-model:current-page="pages.page"
                  v-model:page-size="pages.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  small
                  background
                  mt-20
                  flex
                  justify-end
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
    />

    <RejectReview :key="id"
                  v-model:visible="visible"
                  v-model:id="id"
    />
</template>

<style lang="less" scoped>
@bg-color: #f5f6fa;
@label-color: gray;

.col-tips {
    .el-icon {
        color: @label-color;
        border: 1px solid @label-color;
        border-radius: 8px;
        padding: 2px;
        transform: translateY(2px);
        margin-right: 10px;
        margin-left: 5px;
    }
}

.protocol-list {
    width: 100%;
    border: 1px solid @bg-color;
    border-radius: 4px;
    margin-bottom: 20px;

    .top {
        width: 100%;
        background: @bg-color;
        color: #000;
        padding-left: 20px;

        .top-label {
            display: inline-block;
            color: @label-color;
            line-height: 35px;
            width: 250px;
        }
    }

    .list-content {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 0;

        .check-col {
            width: 60px;
            text-align: center;
        }

        .list-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 20px;

            .list-col {
                min-width: 200px;
                color: @label-color;
                max-width: 200px;
            }

            .col-price {
                text-align: right;

                span {
                    color: red;
                    font-size: 16px;
                    font-weight: 600;
                }
            }
        }
    }

    .expand-row {
        p {
            padding-left: 10px;
        }
    }
}
</style>
